<template>
<div>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout>
<!-- 侧边栏-->
      <a-layout-sider width="180" style="background: #fff">
        <a-menu
            mode="inline"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="home" />首页</span>
            <a-menu-item key="1">
              <router-link :to="{name:'Total'}">统计</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="shopping-cart" />商品</span>
            <a-menu-item key="5">
              <router-link :to="{name:'CommList'}">商品列表</router-link>
            </a-menu-item>
            <a-menu-item key="6">
              <router-link :to="{name:'CommAdd'}">添加商品</router-link>
            </a-menu-item>
            <a-menu-item key="7">
              <router-link :to="{name:'CommLabel'}">商品标签</router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
<!-- 内容布局-->
      <a-layout style="padding: 0 24px 24px" >
<!-- 吊顶-->
        <div class="topBread">
          <a-breadcrumb class="navtoBread">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <a-dropdown placement="bottomCenter">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              周周 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;">退出登录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <a-layout-content
            :style="{ background: '#fff', margin: 0, minHeight: '280px' }"
            class="home-Content"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</div>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
};
</script>

<style scoped lang="less">
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
#components-layout-demo-top-side-2{
  width: 100vm;
  height: 100vh;
  //导航
  .topBread{
    background-color: white;
    height: 50px;
    margin: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    .navtoBread{

    }
  }
  .home-Content{
    margin-top: 30px;
  }
 }
router-link{
  height: 100%;
  width: 100%;
}
</style>

